<template>
  <Back title="景点列表" />
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-cell
      v-for="item in attlist"
      :key="item.id"
      class="custom-card"
      @click="goDetail(item.id)"
    >
      <div class="card-content">
        <img
          :src="item?.img ? `http://127.0.0.1:8000${item.img}` : item.img"
          alt="景点图片"
          class="card-image"
        />
        <div class="card-info">
          <h3 class="card-title">{{ item.name }}</h3>
          <p class="card-description">{{ item.desc }}</p>
          <div class="card-price">
            <span class="price-text">价格：<span style="color: red;">{{ item.price }}元起</span></span>
            <span class="stock-text">剩余：{{ item.num }}张</span>
          </div>
        </div>
      </div>
    </van-cell>
  </van-list>
</template>



<script setup>
import { ref,onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
// import dibudaohang from './dibudaohang.vue';
import http from '../http';
import Back from '../utils/Back.vue';

const router = useRouter();
const attlist = ref([
  {
    name: '青城山',
    city: '成都市',
    desc: '青城山位于四川省成都市邛崃市西南部，是中国道教发源地之一，被誉为“天下第一福地”。',
    price: '100',
    img: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E6%99%AF%E7%82%B9%E5%88%97%E8%A1%A8/u1111.svg',
    id: 1,
    num : 1000
  },
  {
    name: '青城山',
    city: '成都市',
    desc: '青城山位于四川省成都市邛崃市西南部，是中国道教发源地之一，被誉为“天下第一福地”。',
    price: '100',
    img: 'https://cdn8.axureshop.com/demo2024/1628102/images/%E6%99%AF%E7%82%B9%E5%88%97%E8%A1%A8/u1111.svg',
    id: 1,
    num : 1000
  },

]);
const loading = ref(false);
const finished = ref(false);
const getattlist= async () => {
  http.get('/att/list').then(res => {
    attlist.value = res.data.data;
  })
}
const goDetail = (id) => {
  router.push({ path: '/attinfo', query: { id: id } });
}

onMounted( () => {
  getattlist();
})
</script>


<style scoped>
.custom-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

.card-content {
  display: flex;
  gap: 15px;
}

.card-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}

.card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.card-description {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

.card-price {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #333;
}

.price-text,
.stock-text {
  font-weight: bold;
}
</style>